/****************
 *@description: 搜索热词配置
 *@author: Xhd 
 *@date: 2023-04-07 14:05:26
 *@version: V1.0.0
*************************************************************************/

import React, { Component } from "react";
import { Space } from "antd";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import TheButton from "@/components/TheButton";
import TheQueryForm from '@/components/TheQueryForm';
import { apiGetShopKeywordList, apiDeleteShopKeywordById } from "@/request/app/hotsearch.js";
import store from "@/store/store";
import _ from 'lodash';
import { getDateTime3 } from '@/utils/getDate';

class HotSearch extends Component {
  constructor(){
    super()
    this.queryFormRef = React.createRef()
    this.state={
      dataSource: [],
      columns: [
        {
          title: 'ID',
          dataIndex: 'keywordId',
          key: 'keywordId'
        },
        {
          title: '关键词',
          dataIndex: 'keyword',
          key: 'keyword'
        },
        {
          title: '序号',
          dataIndex: 'sort',
          key: 'sort'
        },
        {
          title: '最近操作时间',
          dataIndex: 'updateTime',
          key: 'updateTime'
        },
        {
          title: '操作',
          render: (record)=>{
            return <div>
              <TheButton onClick={()=>{this.detail('edit',record.keywordId)}} >修改</TheButton>
              <TheButton onClick={()=>{this.deleteData(record.keywordId)}} >删除</TheButton>
            </div>
          }
        }
      ],
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      queryFormOptions:[
        { field: 'keyword', label: '关键词', placeholder: '请输入', require: false, rules: [], type: 'Input', defaultValue: '' },
        { field: 'taskTime', label: '操作时间', placeholder: '请选择', require: false, rules: [], type: 'RangePicker', defaultValue: '' },
      ],
      queryForm:{}
    }
  }

  componentDidMount(){
    let searchParams = store.getState().searchValue
    let { pageNo, pageSize, queryForm ,pathName} = searchParams
    if (searchParams && pageNo &&pathName =='searchHot') {
      let { pageNo, pageSize, code } = searchParams
      this.setState({
        code,
        pageData: {
            pageNo: pageNo, pageSize: pageSize
        }
      }, () => {
        // sthis.queryFormRef.onSetDefault({ ...queryForm })
        this.getData()
      })
    } else {
      this.getData()
    }
  }

  getData = async (fieldsValue = {}) =>{
    const { pageNo, pageSize } = this.state.pageData
    if (fieldsValue && !_.isEmpty(fieldsValue.taskTime)) {
      fieldsValue.start = getDateTime3(fieldsValue.taskTime[0])+' 00:00:00'
      fieldsValue.stop = getDateTime3(fieldsValue.taskTime[1])+' 23:59:59'
      delete(fieldsValue.taskTime)
    }
    this.setState({
      queryForm: fieldsValue === undefined ? this.state.queryForm : { ...fieldsValue }
    },async () =>{
        const params = {
          pageNo, pageSize, ...this.state.queryForm
        }
        store.dispatch({
          type: 'SaveSearchValues',
          data: {
            pathName: 'searchHot',

            ...params
          }
        })
        let res = await apiGetShopKeywordList({...params, keywordCategory: 1})
        if(res.code === 0){
          this.setState({
            dataSource:res.data,
            pageData:{
              pageNo:res.pageNo,
              pageSize:res.pageSize,
            },
            total:res.totalCount
          })
        }
    })
  }
  // 分页
  PageChange = (pageNo, pageSize) => {
    this.setState({
      pageData:{
        pageNo,
        pageSize,
      }
    },()=> {
      this.getData()
    })
  }
  // 重置
  onReset() {
    this.setState({
      queryForm:{}
    },()=>{
      this.PageChange(1, 10)
    })
  }
  // 搜索
  onSearch(fieldsValue) {
    this.setState({
      pageData: {pageNo:1,pageSize:10}
    },()=>{
      this.getData(fieldsValue)
    })
  }
  
  // 新增/修改
  detail = (type, id) => {
    this.props.history.push(`/app/searchHot/add/${type}/${id}`)
  }

  // 删除
  deleteData = (keywordId) => {
    React.$confirm({
      title: "提示",
      type: 'warning',
      content: "确定是否删除？",
      onOk: async () => {
          let res = await apiDeleteShopKeywordById({ 'id':keywordId })
          if (res.code === 0) {
              React.$message({
                  type: 'success',
                  content: '删除成功'
              })
              this.PageChange(1, 10)
          } else {
              React.$message({
                  type: 'warning',
                  content: res.codeMessage
              })
          }
      }
  })
  }

  render(){
    const { columns, dataSource, pageData:{pageNo, pageSize}, total, queryFormOptions } = this.state
    return <div className="p-layout-box">
      {/* <TheQueryForm
        ref={(ref) => this.queryFormRef = ref}
        show={true}
        option={queryFormOptions}
        onReset={() => this.onReset()}
        onGetValues={(fieldsValue) => this.onSearch(fieldsValue)}
      /> */}
      <Space direction="vertical">
        <TheButton type="primary"  size='middle'  onClick={()=>this.detail('add',null)} >新增</TheButton>
        <TheTable
          columns={columns}
          dataSource={dataSource}
        />
      </Space>
      <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.PageChange} />
    </div>
  }
}

export default HotSearch
